<template>
  <div>
    <van-nav-bar title="物流信息" left-text="返回" left-arrow @click-left="$router.back(-1)"/>

    <header>顺丰快递 {{express_num}}</header>

    <van-steps direction="vertical" :active="0" active-color="#f60">
      <van-step v-for="(value, key) in lists" :key="key">
        <h3>{{value.remark}}</h3>
        <p>{{value.datetime}}</p>
      </van-step>
    </van-steps>

    <div class="no_tracker" v-if="lists.length === 0">
      <p><van-loading /></p>
    </div>
  </div>
</template>




<script>
export default {
  data() {
    return {
      lists: [],
      express_num: ""
    };
  },
  created() {
    this.loadLists();
  },
  methods: {
    loadLists() {
      
      
      this.apiPost('/shop.order/order_track', { order_id: this.$route.query.order_id }).then(res => {
        
        
        if (res.data != null) {
          this.lists = res.data.lists;
          this.express_num = res.data.no;
        } else {
          this.loading = "该单号暂无物流进展，请稍后再试";
          this.express_num = res.data.no;
        }
        
        
      });
      
      
    }
  }
};
</script>





<style lang="scss" scoped>
header {
  line-height: 1.5rem;
  padding: 1rem;
}
.no_tracker {
  text-align: center;
  background-color: #fff;
  padding: 1rem;
  line-height: 1.5rem;
}
</style>
